<template>
    <div class="yuyue-detail" v-loading="loading" ref="print">
        <el-page-header @back="goBack" content="详情页面"></el-page-header>
        <div class="admin-detail">
            <div class="detail detail-readmodule">
                <div class="detail-title">科室id：</div>
                <div class="detail-content">{{ map.keshiid }}</div>
            </div>
            <div class="detail detail-text">
                <div class="detail-title">科室名：</div>
                <div class="detail-content">{{ map.keshiming }}</div>
            </div>
            <div class="detail detail-text">
                <div class="detail-title">姓名：</div>
                <div class="detail-content">{{ map.xingming }}</div>
            </div>
            <div class="detail detail-text">
                <div class="detail-title">联系电话：</div>
                <div class="detail-content">{{ map.lianxidianhua }}</div>
            </div>
            <div class="detail detail-text">
                <div class="detail-title">身份证：</div>
                <div class="detail-content">{{ map.shenfenzheng }}</div>
            </div>
            <div class="detail detail-date">
                <div class="detail-title">日期：</div>
                <div class="detail-content">{{ map.riqi }}</div>
            </div>
            <div class="detail detail-select">
                <div class="detail-title">时间：</div>
                <div class="detail-content">{{ map.shijian }}</div>
            </div>
            <div class="detail detail-select">
                <div class="detail-title">性别：</div>
                <div class="detail-content">{{ map.xingbie }}</div>
            </div>
            <div class="detail detail-number">
                <div class="detail-title">年龄：</div>
                <div class="detail-content">{{ map.nianling }}</div>
            </div>
            <div class="detail detail-textarea">
                <div class="detail-title">备注：</div>
                <div class="detail-content">{{ map.beizhu }}</div>
            </div>
            <div class="detail detail-textuser">
                <div class="detail-title">用户：</div>
                <div class="detail-content">{{ map.yonghu }}</div>
            </div>
        </div>
        <div class="mt10">
            <el-button type="default" class="hidePrint" @click="$router.go(-1)"> 返回 </el-button>
            <el-button type="success" class="hidePrint" @click="$print"> 打印本页 </el-button>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .yuyue-detail {
        .admin-detail {
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            .detail {
                width: 50%;
                padding: 5px;
                display: flex;
                margin-bottom: 10px;
                border-bottom: 1px solid #DEDEDE;
                .detail-title {
                    width: 120px;
                    text-align: right;
                    flex-shrink: 0;
                }
                .detail-content {
                    flex-grow: 1;
                }
            }
            .detail.detail-images {
                width: 100%;
                flex-wrap: wrap;
                .detail-title {
                    display: none;
                }

                .detail-content {
                    width: 100%;
                    padding: 10px;
                }
            }
            .detail.detail-editor,
            .detail.detail-dataset {
                width: 100%;
                flex-wrap: wrap;
                .detail-title {
                    width: 100%;
                    padding: 10px;
                    margin-top: 10px;
                    background: #9a0606;
                    color: #ffffff;
                    text-align: left;
                }
                .detail-content {
                    padding: 10px;
                }
            }
        }
    }
</style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";

    export default {
        data() {
            return {
                loading: false,
                map: {},
            };
        },
        props: {
            id: {
                type: [String, Number],
                required: true,
            },
        },
        watch: {
            id: {
                handler() {
                    this.loadDetail();
                },
                immediate: true,
            },
        },
        computed: {},
        methods: {
            goBack() {
                this.$router.go(-1);
            },
            loadDetail() {
                if (this.loading) return;
                this.loading = true;
                this.$store
                    .dispatch("yuyue/findById", this.id)
                    .then((res) => {
                        this.loading = false;
                        this.map = res;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {},
        mounted() {},
        destroyed() {},
    };
</script>
